﻿@page "/components/loading"
<LayoutContent AnchorItems="@(new[]{"图标加载","文字加载","文字和图标共同显示加载","不同尺寸的加载","有包裹的加载","全屏加载","API"})">
<PageHeader Title="Loading 加载中">在网络较慢或数据较多时，表示数据正在加载的状态。</PageHeader>
<TAlert Theme="Theme.Warning">支持双向绑定</TAlert>
<Example Title="图标加载">
    <Description>加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。</Description>
    <RunContent>
        <TLoading />
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLoading />
```
")
    </CodeContent>
</Example>

<Example Title="文字加载">
    <Description>加载过程中有文字显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。</Description>
    <RunContent>
        <TLoading TextOnly>加载中...</TLoading>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLoading TextOnly>加载中...</TLoading>
```
")
    </CodeContent>
</Example>

<Example Title="文字和图标共同显示加载">
    <Description>加载过程中有文字和图标共同显示。适用于打开页面或操作完成后页面内等待刷新的加载场景。</Description>
    <RunContent>
        <TLoading>加载中...</TLoading>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLoading>加载中...</TLoading>
```
")
    </CodeContent>
</Example>
<Example Title="不同尺寸的加载">
    <Description>小尺寸适用于组件内加载场景，中尺寸适用于容器如卡片、表格等区域的加载场景，大尺寸适用于页面全屏加载场景。</Description>
    <RunContent>
        <TSpace Vertical>
            <TSpaceItem>
                <TLoading Size="Size.Small">加载中（小）...</TLoading>
            </TSpaceItem>
            <TSpaceItem>
                <TLoading>加载中（中）...</TLoading>
            </TSpaceItem>
            <TSpaceItem>
                <TLoading Size="Size.Large">加载中（大）...</TLoading>
            </TSpaceItem>
            <TSpaceItem>
        <TLoading AdditionalStyle="font-size:46px">加载中（自定义）...</TLoading>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLoading Size=""Size.Small"">加载中（小）...</TLoading>
<TLoading>加载中（中）...</TLoading>
<TLoading Size=""Size.Large"">加载中（大）...</TLoading>
<TLoading AdditionalStyle=""font-size:78px"">加载中（自定义）...</TLoading>
```
")
    </CodeContent>
</Example>
<Example Title="有包裹的加载">
    <Description>@Code.Create("用 `<LoadinContainer>...</LoadingContainer>` 来包裹 `<TLoading />` 组件和内容")</Description>
    <RunContent>
        <LoadingContainer AdditionalStyle="width:120px">
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>

            <TLoading Overlay/>
        </LoadingContainer>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<LoadingContainer>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>

    <TLoading Overlay/>
</LoadingContainer>
```
")
    </CodeContent>
</Example>
<Example Title="全屏加载">
    <Description>全屏展示加载状态，阻止用户操作。</Description>
    <RunContent>
        <TButton Theme="Theme.Primary" OnClick="ShowFullScreen">点击加载全屏</TButton>
        
        <TLoading FullScreen Overlay Visible="IsLoading">加载中</TLoading>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLoading FullScreen Overlay Visible=""IsLoading"">加载中</TLoading>

@code{
    bool IsLoading{ get; set; }

    Timer? timer;

    void ShowFullScreen()
    {
        IsLoading = true;
        timer = new(async state =>
        {
            IsLoading = false;
            await InvokeAsync(StateHasChanged);
            timer?.Change(Timeout.Infinite, Timeout.Infinite);
        }, null,5000, 5000);
        
    }
}
```
")
    </CodeContent>
    </Example><div id="API"></div>
<ComponentAPI Component="typeof(TLoading)"></ComponentAPI>
</LayoutContent>
@code{
    bool IsLoading{ get; set; }

    Timer? timer;

    void ShowFullScreen()
    {
        IsLoading = true;
        timer = new(async state =>
        {
            IsLoading = false;
            await InvokeAsync(StateHasChanged);
            timer?.Change(Timeout.Infinite, Timeout.Infinite);
        }, null,5000, 5000);
        
    }
}